<template>
<div class="artifact-page">
  <section class="list">
    <div v-for="artifact in flowerInfos" :key="artifact.id" class="img-list">
      <artifactInfo v-bind:element="artifact"></artifactInfo>
    </div>
  </section>
  <section class="list">
    <div v-for="artifact in plumInfos" :key="artifact.id" class="img-list">
      <artifactInfo v-bind:element="artifact"></artifactInfo>
    </div>
  </section>
  <section class="list">
    <div v-for="artifact in eonInfos" :key="artifact.id" class="img-list">
      <artifactInfo v-bind:element="artifact"></artifactInfo>
    </div>
  </section>
  <section class="list">
    <div v-for="artifact in gobletInfos" :key="artifact.id" class="img-list">
      <artifactInfo v-bind:element="artifact"></artifactInfo>
    </div>
  </section>
  <section class="list">
    <div v-for="artifact in circletInfos" :key="artifact.id" class="img-list">
      <artifactInfo v-bind:element="artifact"></artifactInfo>
    </div>
  </section>
</div>

</template>

<script>
import ArtifactInfo from "@/components/ArtifactInfo";
export default {
  data() {
    return {
      flowerInfos:[],
      plumInfos:[],
      eonInfos:[],
      gobletInfos:[],
      circletInfos:[]
    }
  },
  created() {
    this.$artifactSocket.registerCallBack("artifact", this.getData)
  },
  methods: {
    getData(ret) {
      this.flowerInfos = ret.flowerList
      this.plumInfos = ret.plumList
      this.eonInfos = ret.eonList
      this.gobletInfos = ret.gobletList
      this.circletInfos = ret.circletList
      console.log(this.flowerInfos)
    }
  },
  components: {
    artifactInfo: ArtifactInfo
  }
}
</script>

<style lang="less" scoped>
.artifact-page{
  display: flex;
  .list{
    overflow-y:scroll;
    height: 100%;
    width: 20%;
    display: block;
    .img-list{
      width: 100%;
      height: 10%;
    }
  }
}


</style>
